<template>
  <el-menu-item index="3" @click="handleDraw"> 事件添加</el-menu-item>
  <div id="popup3" class="ol-popup">
    <div class="event-head">
      事件详细信息
      <a
        href="javascript:void(0)"
        id="popup-closer"
        class="ol-popup-closer"
        @click="handleCancel"
      ></a>
    </div>
    <div class="event-box" id="popup-content">
      <div class="event-item">
        <table>
          <tr>
            <th>事件编号</th>
            <td>
              <input
                type="text"
                v-model="eventNumber"
                @blur="limiteventNumber"
                placeholder=" 如: js202401010001"
              />
            </td>
          </tr>
          <tr>
            <th>事件类型</th>
            <td>
              <select id="event-type" v-model="eventType" name="type">
                <option value="碰撞">碰撞</option>
                <option value="刮蹭">刮蹭</option>
                <option value="碾压">碾压</option>
                <option value="追尾">追尾</option>
                <option value="超车">超车</option>
                <option value="失火">失火</option>
                <option value="其他">其他</option>
              </select>
            </td>
          </tr>
          <tr>
            <th>事件等级</th>
            <td>
              <select id="event-level" v-model="eventLevel" name="level">
                <option value="1">轻微事故</option>
                <option value="2">一般事故</option>
                <option value="3">严重事故</option>
                <option value="4">灾难事故</option>
              </select>
            </td>
          </tr>
          <tr>
            <th>发生时间</th>
            <td>
              <!-- <el-date-picker
                v-model="eventTime"
                id="event-time"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker> -->
               <input
                type="datetime-local"
                v-model="eventTime"
                id="event-time"
                placeholder=" 年 /月/日 --:--"
              />
            </td>
          </tr>
          <tr>
            <th>发生地点</th>
            <td>
              <input
                type="text"
                v-model="eventLocation"
                placeholder=" 如: 武汉市光谷广场"
              />
            </td>
          </tr>
          <tr>
            <th>车牌号</th>
            <td>
              <input
                type="text"
                v-model="vehicleNumber"
                @blur="limitvehicleNumber"
                placeholder=" 如: 鄂A00001"
              />
            </td>
          </tr>
          <tr>
            <th>驾驶员</th>
            <td>
              <input
                type="text"
                v-model="driverName"
                placeholder=" 如: 张三三"
              />
            </td>
          </tr>
          <tr>
            <th>处理状态</th>
            <td>
              <select v-model="eventStatus" id="event-state" name="state">
                <option value="0">待处理</option>
                <option value="1">处理中</option>
                <option value="2">已归档</option>
              </select>
            </td>
          </tr>
        </table>
      </div>
      <div class="event-btn">
        <button class="evt-submit" @click="handleSubmit">提交</button>
        <button class="evt-cancel" @click="handleCancel">取消</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { createDraw } from "@/api/ol-api/createDraw.js";
import { Point } from "@/api/mapgis-api/Point";
const { proxy } = getCurrentInstance();
let map, docLayer, popup, position;
let points = []; //存储所有绘制的点
let isSubmitted = false; // 用于判断是否已经提交

// 定义响应式数据
const eventNumber = ref("");
const eventType = ref("");
const eventLevel = ref("");
const eventTime = ref("");
const eventLocation = ref("");
const vehicleNumber = ref("");
const driverName = ref("");
const eventStatus = ref("");

//创建画笔图层
const draw_source = new ol.source.Vector({});
const draw_layer = new ol.layer.Vector({
  source: draw_source,
});
//创建点画笔
let draw_point = createDraw({
  type: "Point",
  source: draw_source,
});
//添加doclayer

onMounted(() => {
  map = proxy.$map;
  docLayer = proxy.$docLayer;
  map.addLayer(draw_layer);
  //创建弹窗
  var container = document.getElementById("popup3");
  popup = new ol.Overlay({
    element: container,
    autoPan: true,
    positioning: "bottom-center",
    stopEvent: true,
    autoPanAnimation: {
      duration: 250,
    },
  });
  map.addOverlay(popup);
});

//限制输入内容
const limiteventNumber = () => {
  const pattern = /^js\d{12}$/;
  if (!pattern.test(eventNumber.value)) {
    alert("请输入正确的事件编号！");
    eventNumber.value = '';
  }
}
const limitvehicleNumber = () => { 
  const pattern = /(^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$)/;
  if (!pattern.test(vehicleNumber.value)) {
    alert("请输入正确的车牌号！");
    vehicleNumber.value = '';
  }
}

//处理时间格式方法
const formatDate = (date) => { 
  // 使用replace方法替换日期和时间的分隔符
  var formatted = date.replace(/-/g, '.').replace('T', ' ');
  // 如果存在'Z'，则移除它
  if (formatted.endsWith('Z')) {
    formatted = formatted.slice(0, -1);
  }
  return formatted;
}

//点击事件
const handleDraw = () => {
  //激活画笔
  map.addInteraction(draw_point);
  draw_point.on("drawend", (e) => {
    //清除画笔样式
    map.removeInteraction(draw_point);
    draw_source.clear();
    const feature = e.feature;
    position = e.feature.getGeometry().getCoordinates();
    //显示弹窗
    popup.setPosition(position);
    //存入绘制的点要素
    points.push(feature);
    //飞行至点击处
    map.getView().animate({
      center: [position[0], position[1] + 0.0074],
      zoom: 15,
      duration: 1000,
    });
  });

};
//关闭弹窗
const handleCancel = () => {
  if (points.length > 0) {
    const lastPoint = points.pop();
    //删除最新绘制的要素
    draw_source.removeFeature(lastPoint);
  }
  popup.setPosition(null);
};
//提交按钮
const handleSubmit = () => {
  isSubmitted = true;
  if (isSubmitted) {
    let service = {
      docName: "guanggu",
      layerId: 2,
    };
    //传递属性信息
    let attr = [
      //   { name: "mpLayer", type: "string", value: '0' },
      { name: "事件编号", type: "string", value: eventNumber.value },
      { name: "事件类型", type: "string", value: eventType.value },
      { name: "事件等级", type: "string", value: eventLevel.value },
      { name: "发生时间", type: "string", value: formatDate(eventTime.value) },
      { name: "发生地点", type: "string", value: eventLocation.value },
      { name: "车牌号", type: "string", value: vehicleNumber.value },
      { name: "驾驶员", type: "string", value: driverName.value },
      { name: "处理状态", type: "string", value: eventStatus.value },
    ];
    console.log(attr, "attr");
    if (attr.every((item) => item.value !== "")) {
      let color;
      if (eventStatus.value == "0") {
        color = 6;
      } else if (eventStatus.value == "1") {
        color = 4;
      } else {
        color = 90;
      }
      Point.add({
        position,
        service,
        docLayer,
        attr,
        color
      });
      isSubmitted = false;
      popup.setPosition(null);
      console.log("提交成功！");
    } else {
      alert("请填写完整信息！");
    }
    //清除输入框内容
    eventNumber.value = "";
    eventType.value = "";
    eventLevel.value = "";
    eventTime.value = "";
    eventLocation.value = "";
    vehicleNumber.value = "";
    driverName.value = "";
    eventStatus.value = "";
  }
};
</script>

<style scoped>
.event-head {
  padding: 5px;
  width: 350px;
  color: #fff;
  font-size: 15px;
  background-color: #2196f3;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.event-box {
  /* width: 300px; */
  padding: 15px 15px;
  background-color: #fff;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

table,
tr,
th,
td {
  text-align: left;
  font-size: 14px;
  padding: 4px 6px;
  border: 1px solid #ddd;
  border-collapse: collapse;
}
table th {
  width: 30%;
  color: black;
}
table td {
  width: 60%;
  color: #686868;
}
input {
  width: 100%;
  padding: 3px;
  color: #686868;
}
#event-type,
#event-level,
#event-state {
  width: 100%;
  padding: 3px;
  color: #686868;
  border-color: #ddd;
  border-radius: 4px;
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
}
#event-type:focus,
#event-level:focus,
#event-state:focus,
#event-time:focus,
input:focus {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 1px 1px #2196f3;
}
#event-time,
input {
  width: 100%;
  border: none;
}
.event-btn {
  margin-top: 15px;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.evt-submit {
  background-color: #2196f3;
  color: #fff;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.evt-cancel {
  background-color: #fff;
  color: #4b4a4a;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.ol-popup {
  padding: 0;
  box-sizing: border-box;
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 100px;
  z-index: 100;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
      border-top-color: white;
      border-width: 10px;
      left:50%;
      transform: translateX(-50%);
    }

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 50%;
  transform: translateX(-50%);
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "✖";
}
#popup-content {
  color: white;
  font-size: 8px;
  font-family: "微软雅黑";
}

#popup-content .markerInfo {
  font-weight: 500;
}
</style>
